<template>
  <div style="height: 100%;width: 100%;">
    <!--        显示分类的选项-->
    <el-card class="left_card">
      <el-table
          :data="typeList"
          border
          style="width: 100%">
        <el-table-column prop="msg" label="模板问卷分类" width="158" type="index" align="center">
          <template slot-scope="scope">
            <el-link :class="{active : typeActive == scope.row.msg}" :underline="false"
                     @click="showSelectType(scope.row)">{{ scope.row.msg }}
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="main_card">
      <!--          显示选择的类型-->
      <el-tag>{{ this.selectType.msg }}</el-tag>
      <!--          显示模板数据的-->
      <div style="margin-top:20px;">
        <el-table
            :data="templateData"
            border
            style="width: 100%">
          <el-table-column
              prop="theme"
              label="问卷题目"
              align="center"
              width="558px">
            <template slot-scope="scope">
              <el-link :class="{active : questionId == scope.row.id}" :underline="false"
                       @click="findTopicByid(scope.row.id)">{{ scope.row.theme }}
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--          分页区域-->
      <div style="margin-bottom: 10px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.current"
            :page-sizes="[1, 2, 5, 10]"
            :page-size="queryInfo.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryInfo.total">
        </el-pagination>
      </div>
    </el-card>
    <!--        显示分类的选项-->
    <el-card class="right_card">
      <el-table
          :data="topicQuestion"
          border
          style="width: 100%">
        <el-table-column prop="numb" label="题号" type="index" align="center">
        </el-table-column>
        <el-table-column prop="title" label="题目标题" align="center" style="width: 600px;">
        </el-table-column>
      </el-table>
      <el-button type="info" @click="createTemplate" style="transform: translate(250px,10px);">创建模板</el-button>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "question_template",
  data() {
    return {
      //所有的模板对象的问卷
      templateData: [],
      typeList: [],
      typeValue: [],
      topicQuestion: [],
      //就是点击相对应的模板问卷,的问卷
      questionFind: {},
      queryInfo: {
        query: "",
        size: 10,
        current: 1,
        total: 0
      },
      selectType: {
        msg: "全部",
        type: 0
      },
      selectAllType: {
        msg: "全部",
        type: 0
      },
      questionId: 1,
      typeActive: ""
    }
  },
  created() {
    this.$store.state.paper.id = null;
    //得到默认选择的问卷模板
    this.getQuestionId()
    //调用查出所有模板对象
    this.getTemplateData();
    //得到所有的模板数据
    this.getTypeList();
    //显示问卷题目
    this.getTopicFindById();
  },
  methods: {
    //得到问卷id
    getQuestionId() {
      let id = location.search.substr(4, location.search.length - 1);
      this.typeActive = "全部";
      if (id == null || id === "") {//如果没有选择相对应的模板,要查看全部模板,就选择中question问卷,默认为1
        this.questionId = 1;
      } else {//如果选择相对应的模板,从地址栏中读出问卷id
        this.questionId = parseInt(id);
      }
    },
    //得到所有的模板问卷
    getTemplateData() {
      const this_ = this;
      this.$http.get("question/findAllTemplate/" + this.queryInfo.current + '/' + this.queryInfo.size).then(resp => {
        if (resp.flag) {
          this_.templateData = resp.data.rows;
          this_.queryInfo.total = resp.data.total;
        }
      })
    },
    //查找指定类型的模板问卷
    getTemplateDataByType() {
      const this_ = this;
      this.$http.get("question/findTypeTemplate/" + this.queryInfo.current + '/' +
          this.queryInfo.size + '/' + this.selectType.type).then(resp => {
        if (resp.flag) {
          this_.templateData = resp.data.rows;
          this_.queryInfo.total = resp.data.total;
        }
      })
    },
    //得到所有的分类的数据
    getTypeList() {
      const this_ = this;
      this.$http.get("type/all").then(resp => {
        if (resp.flag) {
          this_.typeList = resp.data;
          this_.typeList[this_.typeList.length] = this_.selectAllType;
        }
      })
    },
    //通过问卷id来查出问卷的详情
    getTopicFindById() {
      const this_ = this;
      this.$http.post("topic/findById/" + this.questionId).then(resp => {
        if (resp.flag) {
          this_.topicQuestion = resp.data;
        }
      })
    },
    findTopicByid(id) {
      this.questionId = id;
      this.getTopicFindById();
    },
    //每页几行数据,发生了改变
    handleSizeChange(size) {
      this.queryInfo.size = size;
      this.getTemplateData();
    },
    //当前行发生的变化
    handleCurrentChange(current) {
      this.queryInfo.current = current;
      this.getTemplateData();
    },
    createTemplate() {
      const this_ = this;
      this.$http.post("question/createTemplate/" + this.questionId + '/' + this.$store.state.userId).then(resp => {
        if (resp.flag) {
          this.$store.state.paper.id = resp.data;
          this.$router.push('/survey/addnew');
        }
      })
    },
    //选择了类型,显示选择的类型
    showSelectType(scope) {
      this.typeActive = scope.msg;
      if (scope.msg != "全部") {
        this.selectType.msg = scope.msg;
        this.selectType.type = scope.id;
        this.queryInfo.current = 1;
        this.getTemplateDataByType();
      } else {
        this.selectType.msg = "全部";
        this.selectType.id = 0;
        this.getTemplateData();
      }
    }

  }
}
</script>
<style scoped lang="less">
.left_card {
  float: left;
  margin-top: 0px;
  width: 200px;
  height: 99%;
}

.main_card {
  float: left;
  height: 99%;
}

.right_card {
  float: left;
  height: 99%;
  width: 600px;
}

.active {
  color: dodgerblue;
  font-size: x-large;
}
</style>